<template>
  <div class="SK-user-center-gamefacory-container">
    <div class="gamefactory-game-container" style="height: 700px">
      <div
        class="game-list-none"
        style="margin: 0px"
        v-for="(game, index) in myGame"
        :key="game.id"
        @click="inGame(game)"
      >
        <div class="game-block-container game-block-recommend">
          <img :src="game.page" alt="" />
          <div class="game-name">{{ game.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MyGame",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
    };
  },
  mounted() {
    this.getUserInfo();
    this.getGameList();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    },
    async getGameList() {
      try {
        await this.$store.dispatch("getGame", this.userInfo.name);
      } catch (error) {
        alert(error.message);
      }
    },
    async inGame(game) {
      let gamename = game.name;
      this.$router.push({ path: "/detail", query: { gamename: gamename } });
    },
  },
  computed: {
    ...mapState({
      myGame: (state) => state.user.myGame,
    }),
  },
};
</script>

<style>
@import "../../../assets/css/mygame.css";
</style>
